<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <!--左边部门-->
        <div>
          <el-container style="height: 500px; border: 1px solid #eee">
            <!-- 左边菜单 -->
            <el-aside width="200px" style="border: 1px solid #eee">
              <el-menu :default-active="activeMenu" @select="handSelect">
                <el-menu-item-group>
                  <el-menu-item index='全部'>全部</el-menu-item>
                  <el-menu-item v-for="item in sectorOptions" :key="item.sectorId" :index="item.sectorName">{{ item.sectorName }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-menu>
            </el-aside>
            <!-- 右边主要内容 -->
            <el-main>
              <el-row>
                <el-table :data="dataList" style="width: 100%" border max-height="450">
          <el-table-column prop="sectorItemId" label="ID" width="100" align="center" />
          <el-table-column prop="product.productName" label="菜品" width="100" align="center" />
          <el-table-column prop="orderNo" label="订单号" align="center" />
          <el-table-column prop="seat.seatNumber" label="座位号" width="150" align="center" />
        </el-table-column>
      </el-table>
              </el-row>
            </el-main>
          </el-container>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  listAllSector,
  getListBysectorName,
  getAllList
} from '@/api/order/sector'
export default {
  name: 'Sector',
  data() {
    return {
      sectorOptions: [],
      // 菜单选项索引
      activeMenu: '全部',
      dataList: []
    }
  },
  created() {
    this.getSectorOptions()
    this.getAllList()
  },
  methods: {
    /** 查询下拉列表选型 */
    getSectorOptions() {
      listAllSector().then(response => {
        this.sectorOptions = response.data
      })
    },
    getListBysectorName(sectorName) {
      getListBysectorName(sectorName).then(response => {
        console.log(response)
        this.dataList = response.data
      })
    },

    //获取全部清单信息
    getAllList() {
      getAllList().then(response => {
        this.dataList = response.data
      })
    },

    /** 菜单选项获取相应的数据 **/
    handSelect(index) {
      this.activeMenu = index
      if(index === '全部') {
        this.getAllList()
      } else {
        this.getListBysectorName(index)
      }
      console.log(index)
    },
  }

}
</script>

<style>

</style>
